<template>
  <div>
    <Category @getCategoryId="getCategoryId" />

    <el-card style="margin-top: 20px">
      <div v-show="scene == 0">
        <el-button
          :disabled="!c3"
          style="margin-bottom: 20px"
          type="primary"
          icon="el-icon-plus"
          @click="add"
          >添加属性</el-button
        >
        <el-table :data="attrList" border stripe style="width: 100%">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80px"
          >
          </el-table-column>
          <el-table-column prop="attrName" label="属性名" width="140px">
          </el-table-column>
          <el-table-column prop="prop" label="属性值" width="width">
            <template slot-scope="{ row }">
              <el-tag
                style="margin: 0 10px"
                type="success"
                :key="attrValueItem.id"
                v-for="attrValueItem in row.attrValueList"
                >{{ attrValueItem.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="140px">
            <template slot-scope="{ row }">
              <el-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                @click="edit(row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="delete1(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div v-show="scene == 1">
        <el-form ref="form" :model="form" inline>
          <el-form-item label="属性名">
            <el-input v-model="form.attrName" placeholder="属性名"></el-input>
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          @click="addAttrValue"
          :disabled="!form.attrName"
          >添加属性值</el-button
        >
        <el-button @click="scene = 0">取消</el-button>

        <el-table
          :data="form.attrValueList"
          style="width: 100%; margin: 20px 0px"
          border
          stripe
        >
          <el-table-column
            label="序号"
            width="80px"
            type="index"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="valueName" label="属性值名称" width="width">
            <template slot-scope="{ row }">
              <el-input
                v-if="row.isShowInput"
                v-model="row.valueName"
                placeholder="请输入属性值"
                ref="input"
                @blur="handleBlur(row)"
              ></el-input>
              <pre v-else @click="clickAttrValue(row)">{{ row.valueName }}</pre>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="width">
            <template slot-scope="{ row }">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteAttrValue(row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          @click="addOrUpdateAttr"
          :disabled="form.attrValueList.length > 0 ? false : true"
          >保存</el-button
        >
        <el-button @click="scene = 0">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      c1: "",
      c2: "",
      c3: "",
      attrList: [],
      scene: 0,
      form: {
        attrName: "",
        attrValueList: [
          // {
          //   attrId: 0,
          //   id: 0,
          //   valueName: "string",
          //   isShowInput:true
          // },
        ],
        categoryId: 0,
        categoryLevel: 3,
      },
    };
  },
  methods: {
    clickAttrValue(row) {
      row.isShowInput = true;
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    delete1(row) {
      this.$confirm("此操作将删除该属性, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$http.attr.reqDeleteAttr(row.id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getAttrList();
        })
        .catch(() => {});
    },
    edit(row) {
      this.scene = 1;
      this.form = { ...row };
      /* this.form.attrValueList.forEach((item) => {
        // item.isShowInput = false;
        this.$set(item, "isShowInput", false);
      }); */
      this.form.attrValueList = this.form.attrValueList.map((item) => ({
        ...item,
        isShowInput: false,
      }));
    },
    add() {
      this.scene = 1;
      this.form = {
        attrName: "",
        attrValueList: [],
        categoryId: this.c3,
        categoryLevel: 3,
      };
    },
    async addOrUpdateAttr() {
      let { form } = this;
      let res = form.attrValueList.find((item) => item.valueName == "");
      if (res) {
        this.$message({
          type: "error",
          message: "有空的属性值",
        });
        return;
      }

      let repeat =
        this.attrList.find((item) => item.attrName == form.attrName) &&
        !form.id;
      if (repeat) {
        this.$message({
          type: "error",
          message: "属性已经存在",
        });
        return;
      }
      form.attrValueList.forEach((item) => delete item.isShowInput);

      try {
        await this.$http.attr.reqSaveAttr(form);
        this.$message({
          type: "success",
          message: form.id ? "编辑成功" : "添加成功",
        });
        this.scene = 0;
        this.getAttrList();
      } catch (error) {
        this.$message({
          type: "error",
          message: form.id ? "编辑失败" : "添加失败",
        });
      }
    },
    //删除属性值
    deleteAttrValue(row) {
      let index = this.form.attrValueList.indexOf(row);
      this.form.attrValueList.splice(index, 1);
    },
    handleBlur(attrValueItem) {
      if (attrValueItem.valueName.trim() == "") {
        this.$message({
          type: "warning",
          message: "属性值不能为空",
        });
        return;
      }

      let res = this.form.attrValueList.find((item) => {
        if (item !== attrValueItem) {
          if (item.valueName == attrValueItem.valueName) {
            return true;
          }
        }
      });

      if (res) {
        this.$message({
          type: "warning",
          message: "属性值重复了",
        });
        this.form.attrValueList.splice(
          this.form.attrValueList.indexOf(attrValueItem),
          1
        );
        return;
      }

      attrValueItem.isShowInput = false;
    },
    //添加属性值
    addAttrValue() {
      this.form.attrValueList.push({
        valueName: "",
        isShowInput: true,
      });
      this.$nextTick(() => {
        this.$refs.input.focus();
      });
    },
    //儿子给父亲传递分类id
    getCategoryId(level, id) {
      switch (level) {
        case 1:
          this.c2 = "";
          this.c3 = "";
          this.c1 = id;
          break;
        case 2:
          this.c3 = "";
          this.c2 = id;
          break;
        default:
          this.c3 = id;
          this.form.categoryId = id;
          this.getAttrList();
          break;
      }
    },
    //获取属性列表
    async getAttrList() {
      let { c1, c2, c3 } = this;
      let res = await this.$http.attr.reqAttrList(c1, c2, c3);
      this.attrList = res.data;
    },
  },
};
</script>

<style>
</style>